import React, { useEffect, useRef, useState } from "react";
import type { ActionType, ProColumns } from "@ant-design/pro-components";
import { ProTable, ProFormText, ModalForm } from "@ant-design/pro-components";
import { Button } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { addManufacturer, listManufacturerByPage } from "@/services/manufacturer/api";
import message from "antd/es/message";

const ManufacturerControl: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [isCreate, setIsCreate] = useState<boolean>(false);
  const [current, setCurrent] = useState<API.ManufacturerVO>();
  const [isUpdate, setIsUpdate] = useState<boolean>(false);
  const [data, setData] = useState<API.ManufacturerVO[]>([]);
  const [total, setTotal] = useState<number>(0);

  const loadData = async (params: any) => {
    const res = await listManufacturerByPage({
      params: params,
      pageNum: currentPage,
      pageSize: 10,
    });
    if (res.code !== 0) {
      message.error("生产商数据加载失败 " + res.message);
      return;
    }
    setData(res?.data?.records || []);
    setTotal(res?.data?.total || 0);
  };


  const columns: ProColumns<API.ManufacturerVO>[] = [
    {
      title: '生产商名称',
      width: 120,
      dataIndex: 'name',
    },
    {
      title: '生产商代码',
      width: 120,
      dataIndex: 'code',
    },
  ];

  useEffect(() => {
    loadData({});
  }, [currentPage]);

  return (
    <>
      <ProTable<API.ManufacturerVO>
        columns={columns}
        request={async (params) => {
          await loadData(params);
          return data;
        }}
        actionRef={actionRef}
        dataSource={data}
        cardBordered
        editable={{
          type: 'multiple',
        }}
        columnsState={{
          persistenceKey: 'pro-table-manufacturer',
          persistenceType: 'localStorage',
          defaultValue: {
            option: { fixed: 'right', disable: true },
          },
          onChange(value) { },
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        pagination={{
          pageSize: 10,
          onChange: (page) => setCurrentPage(page),
          total: total,
        }}
        dateFormatter="string"
        headerTitle="生产商管理"
        toolBarRender={() => [
          <Button
            key="button"
            icon={<PlusOutlined />}
            onClick={() => {
              setIsCreate(true);
            }}
            type="primary"
          >
            新建生产商
          </Button>,
        ]}
      />
      <ModalForm title="添加生产商" open={isCreate}
        onFinish={async (values: any) => {
          const res = await addManufacturer(values);
          if (res.code !== 0) {
            message.error("生产商添加失败 " + res.message);
          } else {
            message.success('生产商添加成功');
            setIsCreate(false);
          }
        }}
        modalProps={{
          destroyOnClose: true,
          onCancel: () => setIsCreate(false),
        }}
        initialValues={{
          name: '',
          code: '',
        }}
        autoFocusFirstInput>
        <ProFormText
          name="name"
          label="生产商名称"
          placeholder="请输入生产商名称"
        />
        <ProFormText
          name="code"
          label="生产商代码"
          placeholder="请输入生产商代码"
        />
      </ModalForm>
      <ModalForm title="修改生产商信息" open={isUpdate}
        onFinish={async (values: any) => {

        }}
        modalProps={{
          destroyOnClose: true,
          onCancel: () => setIsUpdate(false),
        }}
        initialValues={current}
        autoFocusFirstInput>
        <ProFormText
          readonly={true}
          name="id"
          label="生产商 ID"
        />
        <ProFormText
          name="name"
          label="生产商名称"
          placeholder="请输入生产商名称"
        />
        <ProFormText
          name="code"
          label="生产商代码"
          placeholder="请输入生产商代码"
        />
      </ModalForm>
    </>
  );
}

export default ManufacturerControl;
